<style scoped></style>

<template>
	<div class="btn" :disabled="disabled || (stage === 1 && effectType === 1)" :type="btnType" @click="handleClick">
		<template v-if="stage === 0">
			<slot></slot>
		</template>

		<template v-if="stage === 1 && effectType === 1">
			<hoc-svg :width="20" :height="20" :fill="fill" name="loading"></hoc-svg>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'hoc-btn',

		props: {
			// 0 透明度发生变化
			// 1 loading 动画
			effectType: {
				type: Number,
				default: 0
			},
			// 0 默认
			// 1 展示反馈效果
			stage: {
				type: Number
			},
			btnType: {
				type: String,
				default: 'primary'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			btnFill: {
				type: String,
				default: ''
			},
			stop: {
				type: Boolean,
				default: false
			}
		},

		model: {
			event: 'click',
			prop: 'stage'
		},

		computed: {
			fill() {
				if (this.btnFill) {
					return this.btnFill
				}

				return this.btnType === 'primary' ? '#FFF' : '#00B2F8'
			}
		},

		methods: {
			handleClick(e) {
				this.$emit('click', 1)

				if (this.stop) {
					e.stopPropagation()
				}
			}
		}
	}
</script>